<template>
    <!-- <li>
        <input type="checkbox"  id="cc">
        <label for="cc">sex</label>
        <button disabledx> del</button>
    </li>
    <li>2</li>
    <li>3</li> -->
    <li>
        <input type="checkbox"  v-model="item.isSelect"  @click="changeStatus(index)">
        <label for="cc">{{item.title}}</label>
        <button  @click="delData(index)"> del</button>
    </li>
</template>

<script lang="ts">
import { defineComponent ,reactive,ref} from "vue";
export default defineComponent({
    name:'Item',
    props: ['item', 'index', 'delList', "changeStatu"],
    setup(props) {
        const delData = index => {
            console.log(index);
            // delete per data
            props.delList(index)
        }
        const changeStatus = (index) => {
            props.changeStatu(index)
        }
        return {
            delData,
            changeStatus
        }
    }

})
</script>

<style scoped>
    li {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 500px;
        height: 30px;
        border: 1px solid red;
        list-style: none;
        line-height: 30px;
    }
    li label {
        text-align: center;
    }
    li button {
        border-color: blue;
        background-color: white;
        height: 20px;
        margin-top: 5px;
        margin-right: 5px;
    }
</style>